<template>
  <div class="body">
    <div class="fire">
      <!--   火焰 -->
      <div class="flames">
        <div class="flame"></div>
        <div class="flame"></div>
        <div class="flame"></div>
        <div class="flame"></div>
      </div>
      <!--火柴-->
      <div class="logs"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Fire',
  data() {
    return {
      paths: []
    }
  }
}
</script>

<style scoped>

/*设置body的长宽和背景颜色，上面还有一层div id为app的*/
.body {
  width: 100%;
  height: 100vh;
  background-color: #27282c;
}

/*小火焰暂时位置在屏幕中间*/
.fire {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 20vw;
  width: 20vw;
  background-color: #27282c;
}

/*具体 transform 的各种样式：https://c.runoob.com/codedemo/3391/ */
.flames {
  position: absolute;
  bottom: 15%;
  left: 50%;
  width: 60%;
  height: 60%;
  transform: translate(-50%,-50%) rotate(45deg); /*进行形状的改变：translate(-50%,-50%) 进行2d形状的改变， rotate(45deg)进行倾斜*/
  background-color: aqua;
}

/*定义下面4个小火苗的颜色长宽等*/
.flame {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  background-color: #ffdc01;
  border-radius: 1vw; /*设置正方形变为圆角*/
}

/*设置下面的火柴*/
.logs {
  position: absolute;
  bottom: 25%;
  width: 100%;
  height: 15%;
}

/*给火柴创建了两个伪元素，设置形状以及倾斜*/
.logs::before,
.logs::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(20deg);
  height: 100%;
  width: 100%;
  border-radius: 1vw;
  background-color: #70392f;
}
/*覆盖上面创建伪元素的属性*/
.logs::before {
  transform: translate(-50%,-50%) rotate(-20deg);
  background-color: #a24332;
}

/*设置奇数的flame的动画，这里实际只给 2 3 4的flame元素设置了动画，下面又给2 3 4元素设置了动画的延迟时间*/
.flame:nth-child(2n+1) {
  animation: flameodd 1.5s ease-in infinite;
}
/*设置偶数的flame动画，具体动画实例：https://www.csdn.net/tags/MtTaYg0sOTYzODQtYmxvZwO0O0OO0O0O.html*/
.flame:nth-child(2n) {
  animation: flameoeven 1.5s ease-in infinite; /*最开始慢速：ease-in，infinite无限次播放*/
}

/*下面设置 flame属性 第 2、3、4每一个设置动画的延时播放时间，这样动画就不会同一时间播放*/
.flame:nth-child(2) {
  animation-delay: 0.375s;
}
.flame:nth-child(3) {
  animation-delay: 0.75s;
}
.flame:nth-child(4) {
  animation-delay: 1.125s;
}

/*设置两个动画分别在0 25 40 100动画所要展示样式*/
@keyframes flameodd {
  0% {
    width: 0;
    height: 0;
    background-color: #ffdc01;
    right: 0;
    bottom: 0;
  }
  25% {
    width: 100%;
    height: 100%;
    right: 1%;
    bottom: 2%;
  }
  40% {
    background-color: #ffdc01;
  }
  100% {
    width: 0;
    height: 0;
    background-color: #f73b01;
    z-index: -10;
    right: 150%;
    bottom: 170%;
  }
}
@keyframes flameoeven {
  0% {
    width: 0;
    height: 0;
    background-color: #ffdc01;
    right: 0;
    bottom: 0;
  }
  25% {
    width: 100%;
    height: 100%;
    right: 2%;
    bottom: 1%;
  }
  40% {
    background-color: #ffdc01;
  }
  100% {
    width: 0;
    height: 0;
    background-color: #a24332;
    z-index: -10;
    right: 170%;
    bottom: 150%;
  }
}

</style>
